<template>
    <div>
        <div>
            <el-form ref="searchForm" :inline="true" :model="search" label-suffix="" label-width="100px"
                     label-position="left" size="small">
                <el-row>
                    <el-col :span=12>
                        <el-form-item label="请选择日期">
                            <el-date-picker
                                v-model="dateRange"
                                value-format="yyyy-MM-dd"
                                unlink-panels
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="this.CONST.analysis_date_options">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span=6>
                        <el-form-item :label="darkMode ? '深色模式' : '浅色模式'">
                            <el-switch v-model="darkMode" @change="updateMode" active-color="#0f0c28"
                                       inactive-color="#5fcb71"></el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item>
                            <el-button type="primary" v-on:click="getData">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="reset">重置</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" v-on:click="switchSelected">
                                {{ selectedAllFlag ? '全不选' : '全选' }}
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <el-row>
            <el-col :span="24">
                <div ref="basicChart" style="height:400px; width:100%"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div ref="ratioChart" style="height:400px; width:100%"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {getDpDailyBarData} from '@/api/api'

export default {
    name: "DpDailyAnalysis",
    data() {
        return {
            // 搜索条件
            search: {
                startDate: '',
                endDate: '',
            },
            // 时间范围
            dateRange: [],
            // 字段信息
            fields: this.CONST.cpc_fields,
            // 默认黑色主题色
            darkMode: true,
            // 主题色
            theme: 'dark',

            selectedAllFlag: true,
            basicOption: {},
            basicChart: {},

            ratioOption: {},
            ratioChart: {},
        }
    },
    // 这里定义需要父组件传过来的东西
    props: {
        shopId: String,
        shopName: String,
        size: {
            type: String,
            default: 'small'
        },
        startDate: String,
        endDate: String,
    },
    watch: {
        shopName: function (val, oldVal) {
            this.shopName = val;
        },
        startDate: function (val, oldVal) {
            this.startDate = val;
            this.dateRange = [this.startDate, this.endDate]
            this.getData();
        },
        endDate: function (val, oldVal) {
            this.endDate = val;
            this.dateRange = [this.startDate, this.endDate]
            this.getData();
        },
    },
    methods: {
        updateMode() {
            this.theme = this.darkMode ? 'dark' : 'light';
            if (this.basicChart.id) {
                // 销毁
                this.basicChart.dispose();
            }
            this.basicChart = this.$echarts.init(this.$refs.basicChart, this.theme);
            this.basicChart.setOption(this.basicOption);

            if (this.ratioChart.id) {
                // 销毁
                this.ratioChart.dispose();
            }
            this.ratioChart = this.$echarts.init(this.$refs.ratioChart, this.theme);
            this.ratioChart.setOption(this.ratioOption);
        },
        reset: function () {
            this.$refs['searchForm'].resetFields();
        },
        switchSelected() {
            this.selectedAllFlag = !this.selectedAllFlag;
            let selected = this.basicOption.legend.selected;
            for (let key in selected) {
                selected[key] = this.selectedAllFlag;
            }
            this.initChart();
        },
        // 图表初始化
        initChart() {
            // 基于准备好的dom，初始化echarts实例
            if (this.basicChart.id) {
                // 已经存在，无需在实例化
            } else {
                this.basicChart = this.$echarts.init(this.$refs.basicChart, this.theme);
            }
            // 使用刚指定的配置项和数据显示图表
            this.basicChart.setOption(this.basicOption);

            // 基于准备好的dom，初始化echarts实例
            if (this.ratioChart.id) {
                // 已经存在，无需在实例化
            } else {
                this.ratioChart = this.$echarts.init(this.$refs.ratioChart, this.theme);
            }
            // 使用刚指定的配置项和数据显示图表
            this.ratioChart.setOption(this.ratioOption);
        },
        // 获取表格数据
        getData: function () {
            if (this.shopId) {
                this.search.shopId = this.shopId;
            }
            this.search.startDate = this.dateRange[0];
            this.search.endDate = this.dateRange[1];
            getDpDailyBarData(this.search).then(data => {
                if (data.respCode == 1000) {
                    let basic = data.body.BASIC;
                    let ratio = data.body.RATIO;
                    // 使用刚指定的配置项和数据显示图表
                    this.basicOption = this.CHART.getBarOption(basic.title, basic.legendData, basic.xdata, basic.seriesData, 'bar')
                    this.ratioOption = this.CHART.getBarOption(ratio.title, ratio.legendData, ratio.xdata, ratio.seriesData, 'line', true, true)
                    // 初始化图表
                    this.initChart();
                }
            });
        },
    },
    created() {
    },
    mounted() {
        // 设置默认日期
        let endDate = this.GLOBAL.getFormatDate(new Date(new Date().getTime() - 1000 * 60 * 60 * 24));
        let startDate = this.GLOBAL.getFormatDate(new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 8));
        this.dateRange = [startDate, endDate]
        this.getData();
    }
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
